<template>
  <div class="jq_list">
    <div class="box_container" v-for="(l, key) in data" :key="l.uuid">
      <h3 @click="l.expend = !l.expend">{{ key }}</h3>
      <template v-if="l.expend">
        <div class="box" v-for="item in l" :key="item.sj">
          <div class="title">
            <span class="cu">todesk:</span>{{ item.todesk }}
          </div>
          <div class="time"><span class="cu">账号:</span>{{ item.zh }}</div>
          <div class="time">
            <span class="cu">是否有战令:</span
            >{{ item.zl == "1" ? "是" : "否" }}
          </div>
          <div class="time">
            <span class="cu">是否制裁:</span
            >{{ item.is_zc == "1" ? "是" : "否" }}
          </div>
          <div class="time">
            <span class="cu">制裁次数:</span>{{ item.zc && item.zc.length }}
            <span
              class="js"
              style="color: blue"
              @click="showZcList(item.zc, item.id)"
              >详情</span
            >
          </div>
          <div class="time">
            <span class="cu">模式:</span>{{ item.ms && msList[item.ms.ms] }}
          </div>
          <div class="qu_js">
            <div class="qu">
              <span class="cu">区服:</span>{{ item.qu }}({{ item.kq }})
            </div>
            <div class="js"><span class="cu">角色:</span>{{ item.js }}</div>
          </div>
          <div class="qu_js">
            <div class="qu"><span class="cu">实名:</span>{{ item.sm }}</div>
            <div class="js"><span class="cu">手机:</span>{{ item.sj }}</div>
          </div>
          <div>
            <div
              class="js"
              style="color: blue; text-align: right; margin-top: 10px"
              @click="goDetail(item)"
            >
              详情
            </div>
          </div>
        </div>
      </template>
    </div>
    <van-dialog
      @confirm="confirm"
      @close="close"
      v-model:show="show"
      title="标题"
      show-cancel-button
    >
      <div style="padding: 5px">
        <van-button type="primary" size="small" @click="showDateEdit = true"
          >新增</van-button
        >
        <div v-if="showDateEdit">
          <van-field
            v-model="form.startTime"
            is-link
            readonly
            name="datePicker"
            label="开始日期"
            placeholder="点击选择时间"
            @click="
              () => {
                dateType = 'start';
                showDate = true;
              }
            "
          />
          <van-field
            v-model="form.endTime"
            is-link
            readonly
            name="datePicker"
            label="结束日期"
            placeholder="点击选择时间"
            @click="
              () => {
                dateType = 'end';
                showDate = true;
              }
            "
          />
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
          "
          v-for="item in zcList"
          :key="item.id"
        >
          <div>
            {{ item.startTime }}
            <span style="margin: 0 5px 5px 5px">---------</span>
            {{ item.endTime }}
          </div>
          <div>
            <span style="color: red; margin-right: 10px" @click="del(item)"
              >删除</span
            >
          </div>
        </div>
      </div>
    </van-dialog>
    <van-popup
      v-model:show="showDate"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-date-picker
        v-if="dataType == 'start'"
        v-model="startDate"
        title="选择年月"
        @confirm="confirmDate"
      />
      <van-date-picker
        v-else
        v-model="endDate"
        title="选择年月"
        @confirm="confirmDate"
      />
    </van-popup>
  </div>
</template>

<script setup lang="ts">
//

import { defineAsyncComponent, onMounted, onUnmounted, ref } from "vue";
import { useAxios } from "@/hooks/useAxios";
import { showConfirmDialog } from "vant";
import { useRoute, useRouter } from "vue-router";
import { showToast } from "vant";

const form = ref({
  endTime: "",
  startTime: "",
});
const startDate = ref([
  new Date().getFullYear(),
  new Date().getMonth() + 1,
  new Date().getDate(),
]);
const endDate = ref([
  new Date().getFullYear(),
  new Date().getMonth() + 1,
  new Date().getDate(),
]);
const data = ref({});
const detail2 = ref({});
const timer = ref(null);
let visible = ref(true);
const showDateEdit = ref(false);
let loading = ref(false);
let finished = ref(false);
let show = ref(false);
let zcList = ref([]);
let showDate = ref(false);
const router = useRouter();
const curJqId = ref("");
const dateType = ref("start");
// 模式1 刚出的 前一个月 打团+少量几个角色的深渊+白图+战灵
// 模式2 刚出的 前一个月 打团+少量几个角色的深渊+白图+少量点券
// 模式3 刚出的 前一个月 打团+少量几个角色的深渊+白图
// 模式4 正常 打团+多角色的深渊+白图+战灵
// 模式5 正常 打团+多角色的深渊+白图+少量点券
// 模式6 正常 打团+多角色的深渊+白图
const msList = ref({
  ms1: "模式1 制裁 前一个月 团+少深渊+白图+战灵",
  ms2: "模式2 制裁 前一个月 团+少深渊+白图+少券",
  ms3: "模式3  制裁 前一个月 团+少深渊+白图",
  ms4: "模式4 团+少深渊+白图+战灵",
  ms5: "模式5 团+少深渊+白图+少券",
  ms6: "模式6 团+少深渊+白图",
});
const showDetail = async (detail) => {
  let res = await showConfirmDialog({
    message: `
           机器码: ${detail.uuid}
           当前时间: ${detail.locaTime}
           账号: ${detail.zh}
           当前角色: ${detail.curjs}
           手机号: ${detail.sj}
           区服: ${detail.qu}
           状态:${detail.status}
    `,
  });
  detail2.value = detail;
};
function showZcList(value, id) {
  show.value = true;
  zcList.value = value;
  curJqId.value = id;
}
const del = (id) => {
  showConfirmDialog({
    message: "确定要删除吗？",
  }).then(async () => {
    await useAxios.post("delete/" + id.id);
    showDate.value = false;
    show.value = false;
    showDateEdit.value = false;
    getData();
  });
};

const confirmDate = (value) => {
  if (dateType.value == "start") {
    form.value.startTime =
      value.selectedValues[0] +
      "-" +
      value.selectedValues[1] +
      "-" +
      value.selectedValues[2];
  } else {
    form.value.endTime =
      value.selectedValues[0] +
      "-" +
      value.selectedValues[1] +
      "-" +
      value.selectedValues[2];
  }
  showDate.value = false;
  console.log(form);
};
function confirm() {
  if (curJqId.value) {
    useAxios.post("/addZc/" + curJqId.value, form.value).then((res) => {
      console.log(res);
      if (res.data == "ok") {
        showToast("添加成功");
      }
      getData();
    });
  }
  showDate.value = false;
  show.value = false;
  showDateEdit.value = false;
}
function close() {
  showDate.value = false;
  show.value = false;
  showDateEdit.value = false;
}
function getData() {
  let obj = {};
  loading.value = true;
  useAxios.get("/findAllJq").then((res) => {
    res.data.forEach((item) => {
      if (!obj[item.kq]) {
        obj[item.kq] = [item];
        obj[item.kq].expend = true;
      } else {
        obj[item.kq].push(item);
      }
    });
    console.log(obj);
    data.value = obj;
    loading.value = false;
    finished.value = true;
  });
}
function goDetail(item) {
  router.push("/create_jq?id=" + item.id);
}
onMounted(() => {
  getData();
});
onUnmounted(() => {
  clearInterval(timer.value);
});
</script>

<style lang="less" scoped>
.cu {
  color: black;
  font-weight: 700;
}
.jq_list {
  .box {
    padding: 10px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
  .box_container {
    font-size: 14px;
    padding: 0 10px;
    padding: 10px;
    background-color: #e7e6e6;
    margin-top: 10px;
    .qu_js {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }
  }
}
.jq_list .bar {
  margin: 0 5px;
  width: 30%;
}
.kuai {
  margin: 5px 0;
  padding: 3px 3px;
  font-size: 10px;
  cursor: pointer;
}
.shadong {
  animation-name: shan; /* 动画名称 */
  animation-duration: 2s; /* 动画持续时间 */
  animation-timing-function: ease-in; /* 动画速度曲线 */
  animation-delay: 1s; /* 动画延迟开始时间 */
  animation-iteration-count: infinite; /* 动画重复次数 */
}
@keyframes shan {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
</style>
